<template>
  <el-container class="layout-column">
    <el-header class="layout-header">
      <VipLogoVertical />
      <VipNav />
    </el-header>

    <el-container
      class="layout-main-wrapper"
      :class="{
        ['layout-main-wrapper-' + theme.columnStyle]: true,
      }"
    >
      <VipColumnBar />

      <el-main class="layout-main">
        <VipTabs v-show="showTabs" />
        <VipAppMain />
        <VipFooter />
      </el-main>

    </el-container>
  </el-container>

  <!--  <el-container class="vip-layout-column">-->
  <!--    <vip-column-bar />-->

  <!--    <el-container-->
  <!--      class="vip-main"-->
  <!--      :class="{-->
  <!--        ['vip-main-' + theme.columnStyle]: true-->
  <!--      }"-->
  <!--    >-->
  <!--      <el-header class="vip-layout-header">-->
  <!--        <vip-nav />-->
  <!--      </el-header>-->
  <!--      <vip-tabs v-show="showTabs" />-->
  <!--      <vip-app-main />-->
  <!--      <vip-footer />-->
  <!--    </el-container>-->
  <!--  </el-container>-->
</template>

<script setup lang="ts">
import { useSettingsStore } from '/@/store/modules/settings.ts'

defineOptions({
  name: 'VipLayoutColumn',
})

interface PropsType {
  collapse: boolean
  fixedHeader: boolean
  showTabs: boolean
}

withDefaults(defineProps<PropsType>(), {
  collapse: false,
  fixedHeader: true,
  showTabs: true,
})

const settingsStore = useSettingsStore()
const { theme } = storeToRefs(settingsStore)
</script>

<style scoped lang="scss">
.el-header {
  padding: 0 !important;
  display: flex;
  flex-direction: row;
}

.el-main {
  padding: 0 !important;
}

.layout-main-wrapper {
  overflow: hidden;

  .layout-main {
    display: flex;
    flex-direction: column;
  }
}

.vip-layout-header {
  padding: 0 !important;
  border: 0;
}
</style>
